<template>
  <div class="MainTem-wrap">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :offset="2">
        <slot name="Main"></slot>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :offset="0">
        <slot name="Util"></slot>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from "vue-property-decorator"
  import { Getter, Action } from 'vuex-class'
  import { MainTemData } from '@/types/components/MainTem.interface'
  // import {  } from "@/components" // 组件

  @Component({})
  export default class About extends Vue {
    // prop
    @Prop({
      required: false,
      default: ''
    }) name!: string

    // data
    data: MainTemData = {
      componentName: 'MainTem'
    }

    created() {
      //
    }
    
    activated() {
      //
    }

    mounted() {
      //
    }

  }
</script>

<style lang="less">
  @import "~@/assets/less/variables";

  .MainTem-wrap {
    width: 100%;
  }
  @media (max-width: 768px) {
    .MainTem-wrap {
      box-sizing: border-box;
      padding: 0 20px;
    }
  }
</style>

